<template>
	<div class="BourseAll">
		<headers></headers>
			<div class="Bourse_cont">
					<div class="Nvatrigger">
						<span 
						v-for="(item,index) in nvelist" 
						:class="{active:isShow===index}"
						@click="triggerClick(index)"
						> 
							{{item.name}}
						</span> 
					</div>
					
					<div class="content" :class="{content_all:this.$store.state.content_all}" v-if="isShow==1"> 
						<mt-loadmore  class="" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :autoFill="false"  ref="loadmore" >
							<div slot="top" class="ToLoading  mint-loadmore-top " :class="{mint_top:popupVisible}" v-show="topShow">
							     <div class="spinner"  >
									  <div class="rect1"></div>
									  <div class="rect2"></div>
									  <div class="rect3"></div>
									  <div class="rect4"></div>
									  <div class="rect5"></div>
								</div> 
							   	<span class="dorpSpan">下拉刷新</span> 
						   </div>
						    <ul  class="content_one"> 
							     <li v-for="item in PageData" :data-id="item.ExchangeCompany_ID">
									<i class="cont_img">
										<img alt="加载失败"  :src="item.Image_Url">
									</i>
									<p class="cont_pone">{{item.ExchangeCompany_Name}}</p>
									<p class="cont_ptwo">
										<span class="span1"  v-if="item.ExchangeCompany_IsAttention==0" @click="clickBourseAll(item,item.ExchangeCompany_ID)" ><i class="iconfont icon-plus"></i>关注</span>
										<span class="span2" v-else  @click="clickBourseAll(item,item.ExchangeCompany_ID)"><i class="iconfont icon-right"></i>已关注</span>
									</p>
								</li>
						    </ul>
						     <div slot="bottom" class="ToLoading  mint-loadmore-bottom" :class="{mint_bottom:popupVisible}" v-show="bottomShow">
							     <div class="spinner" v-show="iSshow">
									  <div class="rect1"></div>
									  <div class="rect2"></div>
									  <div class="rect3"></div>
									  <div class="rect4"></div>
									  <div class="rect5"></div>
								</div> 
							   	<span v-if="iSshow">上拉加载更多</span> 
						    	<span class="moveSpan" v-else >抱歉~没有更多信息</span> 
						    </div>
					  </mt-loadmore> 

					</div>

					<div class="content" :class="{content_all:this.$store.state.content_all}" v-if="isShow==0"> 
						<mt-loadmore  class="" :top-method="loadTopTWO" :bottom-method="loadBottomTWO" :bottom-all-loaded="allLoaded" :autoFill="false"  ref="loadmore" >
							<div slot="top" class="ToLoading  mint-loadmore-top " :class="{mint_top:popupVisible}" v-show="topShow">
							     <div class="spinner"  >
									  <div class="rect1"></div>
									  <div class="rect2"></div>
									  <div class="rect3"></div>
									  <div class="rect4"></div>
									  <div class="rect5"></div>
								</div> 
							   	<span class="dorpSpan">下拉刷新</span> 
						   </div>
						    <ul class="content_two">
								<li v-for="item in TicketData"> 
									<p class="cont_pone">
										<span class="span_one">{{item.Ticket_Name}}</span>
										<span class="span_two"><!-- <font>{{item.ExchangeCompany_ID}}</font> --><a>{{item.ExchangeCompany_Name}}</a></span>
									</p>
									<p class="cont_ptwo">
										<span class="span1" v-if="item.Ticket_IsAttention==0" @click="clickTicketAll(item,item.Ticket_ID)"><i class="iconfont icon-plus"></i>关注</span>
										<span class="span2" v-else @click="clickTicketAll(item,item.Ticket_ID)"><i class="iconfont icon-right"></i>已关注</span>
									</p>
								
								</li> 
							</ul>
						     <div slot="bottom" class="ToLoading  mint-loadmore-bottom" :class="{mint_bottom:popupVisible}" v-show="bottomShow">
							     <div class="spinner" v-show="iSshow">
									  <div class="rect1"></div>
									  <div class="rect2"></div>
									  <div class="rect3"></div>
									  <div class="rect4"></div>
									  <div class="rect5"></div>
								</div> 
							   	<span v-if="iSshow">上拉加载更多</span> 
						    	<span class="moveSpan" v-else >抱歉~没有更多信息</span> 
						    </div>
					  </mt-loadmore> 


					
					</div>
			</div> 
	</div>
</template>
<script type="text/javascript">
import headers from '../../components/other/header'
import { Toast } from 'mint-ui';
import { Loadmore } from 'mint-ui'; 
import { Indicator } from 'mint-ui';
	export default{
		name:'BourseAll',
		components:{
			headers 
		},
		data(){
			return{ 
				isShow:0,
				nvelist:[
					{	 
						name:'藏品' 
					},
					{	
						 
						name:'交易所'
					}
				],
				PageIndex:1,
				PageData:[],//交易所加载数据 
				PageCount:'',//总页数 
				topStatus:'',
				allLoaded: false,
				iSshow:true,
				popupVisible:false,
				topShow:false,//下拉刷新
				bottomShow:false,//上拉加载

				TicketIndex:1,//票页数 
				TicketData:[],//票加载数据
				TicketCount:'',//票总页数

			}
		},
		created:function(){ 
			 this.urls=this.$store.state.urls;
		},
		mounted:function(){
			this.GetLocalhost();
			this.getBourseAll(1);
	       this.getTicketAll(1);
			
		},
		destroyed:function(){
			this.loadMore();
		}, 
		methods:{
			triggerClick:function(index) {
				//teb切换
				this.isShow=index;
				this.iSshow=true;
			},
			//进来就判断localhost
			GetLocalhost:function(){
				if (!localStorage.getItem("MembersID")||!localStorage.getItem("Type")||localStorage.getItem("MembersID")=='undefined'||localStorage.getItem("Type")=='undefined'){
					//获取链接传参的值
					localStorage.setItem("MembersID","value");
 					localStorage.setItem("Type","value");
 					localStorage.MembersID =this.$route.params.MembersID;
 					localStorage.Type =this.$route.params.showType;
 					if (!localStorage.getItem("MembersID")||!localStorage.getItem("Type")||localStorage.getItem("MembersID")=='undefined'||localStorage.getItem("Type")=='undefined'){ 
 						//如果修改参数或未定义或空，返回登录
						Toast("账号不正确,请重新登录~");
		    			setTimeout(this.routerUrl,2000);
 					}else{
 						//如果有参，传给vuex全局通用 ***注意刷新后，可能为空，待处理
 						this.$store.state.MembersID=localStorage.getItem("MembersID")
 						this.$store.state.showType=localStorage.getItem("Type")
 					}
				}else{
					//如果有参,正常访问
					if (localStorage.getItem("Type")==2) {
						//如果type==2，证明是app访问，修改vuex状态，隐藏footer
						this.$store.commit('upisFooters');
						this.$store.commit('upContent_all');
					} 
				}
			},
			getBourseAll:function(PageIndex){//交易所请求数据
				Indicator.open({ 
				  spinnerType:'snake'
				});
				this.$http.get(this.urls+'/WorkExchangeCompany/V1.0/GetAllExchangeCompany',{ params:{
					'MembersID':localStorage.getItem("MembersID"),
					'PageIndex':PageIndex
				}}).then((res)=>{
		    			if(res.data.Return_ID==0){
		    				console.log(res.data.Return_Data)
		    				this.PageCount=res.data.Return_Data.PageCount; 
		    				 for (var i = 0; i < res.data.Return_Data.PageData.length; i++) {
					     	 	 this.PageData.push(res.data.Return_Data.PageData[i]);
					     	 }
					     	Indicator.close();
					     	setTimeout(this.Visible,2000);
					     	console.log(this.PageData)
		    			}else{
		    				Toast(res.data.Return_Mess);
		    			}
				  }).catch((err)=>{
				    console.log(err);
				  });
			},
			routerUrl:function(){
				this.$router.push({path:'/LoginAll/ToLogin'}) 
			},
			  //交易所下拉加载 
		 	loadTop:function() {
		 	   this.topShow=true;
		 	   this.bottomShow=false;
		       this.PageData=[];
		       this.TicketData=[];
		        this.PageIndex=1
		       	this.getBourseAll(this.PageIndex);
		       	this.getTicketAll(this.PageIndex)
		       	this.iSshow=true; 
		        this.$refs.loadmore.onTopLoaded();
		         this.clearPopur(); 
		      },  
			loadBottom:function(){
				this.topShow=false;
		 	   this.bottomShow=true;
				 this.PageIndex++;
		  		 if(this.PageIndex <= this.PageCount){
		  			this.getBourseAll(this.PageIndex);
		  			this.getTicketAll(this.PageIndex)
		  			this.clearPopur();
		  		 }else{ 
		  		 		this.iSshow=false;
		  		 		this.Visible();
		  		 		this.bottomShow=true;
		  		 } 
				this.$refs.loadmore.onBottomLoaded();	
			}, 
		      //判断关闭更新提示
		      clearPopur:function(){
		      	this.popupVisible=true; 
		      },
		      Visible:function(){
		      	this.topShow=false;
				this.bottomShow=false;
		      	this.popupVisible=false;
		      },
		     //点击关注交易所 
		     clickBourseAll:function(item,itemID){
		     		this.$http.get(this.urls+'/WorkExchangeCompany/V1.0/AttentionCom',{params:{
		     			'MembersID':localStorage.getItem("MembersID"),
		     			'ExchangeCompanyID':itemID
		     		}}).then((res)=>{
		    			if(res.data.Return_ID==0){
		    			  	 item.ExchangeCompany_IsAttention=!item.ExchangeCompany_IsAttention;
   	  						Toast(res.data.Return_Mess) 
		    			}else{
		    				Toast(res.data.Return_Mess);
		    			}
				  }).catch((err)=>{
				    console.log(err);
				  });
		     },

		    getTicketAll:function(PageIndex){//藏品请求数据
				Indicator.open({ 
				  spinnerType:'snake'
				});
				console.log(PageIndex);
				this.$http.get(this.urls+'/WorkTicket/V1.0/GetAllTicket',{ params:{
					'MembersID':localStorage.getItem("MembersID"),
					'PageIndex':PageIndex
				}}).then((res)=>{
		    			if(res.data.Return_ID==0){
		    				console.log(res.data.Return_Data)
		    				this.TicketCount=res.data.Return_Data.PageCount; 
		    				 for (var i = 0; i < res.data.Return_Data.PageData.length; i++) {
					     	 	 this.TicketData.push(res.data.Return_Data.PageData[i]);
					     	 }
					     	Indicator.close();
					     	setTimeout(this.Visible,2000);
					     	console.log(this.TicketData)
		    			}else{
		    				Toast(res.data.Return_Mess);
		    			}
				  }).catch((err)=>{
				    console.log(err);
				  });
			},
			loadTopTWO:function() {
		 	   this.topShow=true;
		 	   this.bottomShow=false; 
		       this.TicketData=[];
		        this.TicketIndex=1 
		       	this.getTicketAll(this.PageIndex)
		       	this.iSshow=true; 
		        this.$refs.loadmore.onTopLoaded();
		         this.clearPopur(); 
		      },  
			loadBottomTWO:function(){
				this.topShow=false;
		 	   this.bottomShow=true;
				 this.TicketIndex++;
		  		 if(this.TicketIndex <= this.TicketCount){ 
		  			this.getTicketAll(this.TicketIndex)
		  			this.clearPopur();
		  		 }else{ 
		  		 		this.iSshow=false;
		  		 		this.Visible();
		  		 		this.bottomShow=true;
		  		 } 
				this.$refs.loadmore.onBottomLoaded();	
			},
			//点击关注票 
		     clickTicketAll:function(item,itemID){
		     		this.$http.get(this.urls+'/WorkTicket/V1.0/AttentionTic',{params:{
		     			'MembersID':localStorage.getItem("MembersID"),
		     			'TicketID':itemID
		     		}}).then((res)=>{
		    			if(res.data.Return_ID==0){
		    			  	 item.Ticket_IsAttention=!item.Ticket_IsAttention;
   	  						Toast(res.data.Return_Mess) 
		    			}else{
		    				Toast(res.data.Return_Mess);
		    			}
				  }).catch((err)=>{
				    console.log(err);
				  });
		     }

		}
	}
</script>
<style scoped>
	/* 全部交易所 */ 
	.content_one{
		width: 100%;
		padding: 0  0  0.2rem 0;
		overflow:hidden;
	}	
	.content_one li{
		width: 30%;
		display: inline-block;
		margin-left: 2.5%;
		float: left;
		margin-top:0.2666666667rem;
		text-align: center;
		padding: 0.2rem 0.1rem; 
		border:1px solid #ccc;
		min-height: 3.9rem;
		background-color: #fff;
	}

	.content_one li .cont_img{
		display:inline-block;
		width:1.6rem;
		height: 1.6rem;
		border-radius:100%;
		border:0.0133333333rem solid #e2e2e2;
		overflow: hidden;
	}
	.content_one li .cont_pone{
		width:100%;
		text-align: center;
		font-size: 0.32rem;
		line-height: 0.4rem;
		margin-top: 0.16rem;
		margin-bottom: 0.2666666667rem;
		min-height:0.8rem;
		vertical-align: middle;
	}
	.content_one li .cont_ptwo{
		width: 100%;
	}
	  .cont_ptwo span{
		display: inline-block;
		border:1px solid #ccc;
		padding: 0.1333333333rem 0.2666666667rem;
		border-radius: 0.0666666667rem;
	}
	  .cont_ptwo span.span1{
		font-size: 0.3733333333rem;
		color: #db2023;
	}
	  .cont_ptwo span.span2{
		font-size: 0.3733333333rem;
		color: #777777;
	}
	  .cont_ptwo span i{
		margin-right: 0.1333333333rem;
		font-size: 0.3733333333rem;
	} 
	/* 全部藏品 */
	.content_two{
		width: 100%;
		padding: 0.2rem 0;
		overflow: hidden; 
		
	}
	.content_two li{
		width: 100%;
		margin-bottom: 0.2666666667rem;
		background-color: #fff;
		padding: 0.3333333333rem 0;
	}
	.content_two li .cont_pone{
		width:73%;
		display: inline-block;
		padding-left: 0.4rem;
	}
	.content_two li .cont_ptwo{
		width: 26%;
		display: inline-block;
		float: right;
		margin-top:2.5%;
	}
	.content_two li .cont_pone .span_one{
		width: 100%;
		display: block;
		overflow: hidden;
		font-size: 0.4rem;
		color: #666666;

	}

	.content_two li .cont_pone .span_two{
		width: 100%;
		display: block;
		overflow: hidden; 
		color: #666666;
		font-size: 0.3733333333rem;
		margin-top:0.1333333333rem;
		

	}
	.content_two li .cont_pone .span_two a{
		display: inline-block;
		font-size: 0.32rem;
		background-color: #578be1;
		padding: 0.1066666667rem 0.3333333333rem;
		border-radius: 0.04rem;
		margin-left:0.1333333333rem;
		color: #fff;
	}  
</style>

